<!--
 * @Author: 刘十三
 * @Date: 2024-01-04 15:13:20
 * @LastEditors: 刘十三
 * @LastEditTime: 2024-01-09 16:18:11
 * @FilePath: \dev-1.3.1-nm\dev\pages\internal\linkage\components\postponeAccountsItem.vue
 * @Description: 内蒙多员联动 - 延期办理申请台账、延期办理申请（组件） 共用一个页面
-->

<template>
  <view class="item">
    <view class="list" @click="toTarget(sealInfo)">
      <view class="top-part">
        <view class="part-left">
          <view>
            <image class="img-size" src="/static/case/icon-item.png"></image>
            <text class="title-text">{{ sealInfo.retailerName }}</text>
          </view>
        </view>
        <view class="part-right">
          <!-- 1是通过 0 是不通过 -->
          <!-- <text class="part-right-draft" v-if="sealInfo.applyResult == 0">不通过</text> -->
          <text class="part-right-no" v-if="sealInfo.applyResult == 0">不通过</text>
          <text class="part-right-yes" v-else-if="sealInfo.applyResult == 1">通过</text>
          <text class="part-right-draft" v-else>审批中</text>
        </view>
      </view>
      <view class="center-part">
        <view class="feekback-date">申请日期：{{ sealInfo.createDate || "/" }}</view>
        <view class="feekback-person">
          延期申请天数：
          <u-tag :text="sealInfo.termDay" mode="light" type="primary" border-color="#ffffff" style="font-weight:bold"></u-tag>
        </view>
      </view>
      <view class="center-tag">
        <u-tag :text="`延期办理申请是否办结：${sealInfo.processStatusName}`" mode="light" type="info" border-color="#ffffff"></u-tag>
        <u-tag :text="`反馈人：${sealInfo.feebackPersonsName || '/'}`" mode="light" type="info" border-color="#ffffff"></u-tag>
      </view>

      <view class="center-tag">
        <u-tag :text="`反馈来源：${sealInfo.sourceName || '/'}`" mode="light" type="info" border-color="#ffffff"></u-tag>
        <u-tag :text="`反馈类型：${sealInfo.categoryName || '/'}`" mode="light" type="info" border-color="#ffffff"></u-tag>
      </view>

      <view class="bottom-part">
        <view class="item-reason u-line-3">
          <text>申请理由：</text>
          {{ sealInfo.content || "/" }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "deferredProcessListPage",
  props: {
    sealInfo: {
      type: Object,
      required: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    // 查看
    toTarget(row) {
      let self = this;
      self.setRouteParam({ bizUuid: row.delayApplyId, isStatus: "view" });
      self.$u.route({
        url: "/pages/internal/linkage/todo/infomationTaskSet",
        type: "to",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  padding: 0px 12rpx;
  .top-part {
    display: flex;
    justify-content: space-between;
    .img-size {
      width: 32rpx;
      height: 36rpx;
      vertical-align: middle;
    }
    .title-text {
      vertical-align: middle;
      font-weight: 600;
      font-size: 32rpx;
      margin: 0rpx 20rpx;
    }
    .part-right {
      flex: none;
      font-size: 28rpx;
      font-weight: 600;
    }
    .part-right-draft {
      color: $u-type-info;
    }
    .part-right-no {
      color: $u-type-warning;
    }
    .part-right-yes {
      color: $u-type-success;
    }
  }
  .center-part {
    display: flex;
    align-items: center;
    padding-top: 16rpx;
    justify-content: space-between;
    .feekback-date {
      color: $u-type-info-dark;
      font-size: 26rpx;
      font-family: "微软雅黑", sans-serif;
    }
  }
  .center-tag {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-grow: 1;
    align-items: top;
    margin-top: 16rpx;
    font-size: 24rpx;

    :nth-child(n) {
      margin: 5rpx 0;
    }

    :first-child {
      margin-right: 16rpx;
    }
  }
  .bottom-part {
    padding-top: 16rpx;
  }
  .center-bottom {
    .item-reason {
      color: $uni-text-color;
      font-size: 28rpx;
      padding-bottom: 8px;
      font-family: "微软雅黑", sans-serif;
      uni-text {
        color: $cm-form-right-icon-color;
      }
    }
  }
}
</style>
